<!--
 * @Author: your name
 * @Date: 2021-08-09 15:05:35
 * @LastEditTime: 2021-08-11 21:29:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \golte-starlife-admin2\src\components\discounts\discounts.vue
-->
<!--优惠券列表-->
<template>
  <div class="content">
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>优惠卷管理</el-breadcrumb-item>
        <el-breadcrumb-item>优惠券列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">优惠券列表</div>
      <div class="big">
        <div style="margin-top: 10px" class="entirety">
          优惠券名称
          <el-input
            placeholder="请输入优惠券名称"
            v-model="input"
            class="input-with-select"
          >
          </el-input>
        </div>
        <!--  账号状态搜索信息 -->
        <div class="demo-input-suffix">
          <el-button
            style="background-color:#fd804c;color: #fff;"
            @click.native.prevent="isSelect"
            >查询</el-button
          >
          <el-button type="warning" @click.native.prevent="isEmpty"
            >清空</el-button
          >
        </div>
        <div class="news">
          <el-button size="medium" @click="addCoupon">新建优惠券</el-button>
        </div>
      </div>
      <div class="tab">
        <el-table :data="dataList">
          <el-table-column type="selection" width="42"> </el-table-column>
          <el-table-column label="券模板ID" prop="couponNo"></el-table-column>
          <el-table-column label="优惠券名称" prop="couponTitle" width="100">
          </el-table-column>
          <el-table-column label="发布数量" prop="sendNum"> </el-table-column>
          <el-table-column label="领取数量" prop="number"> </el-table-column>
          <el-table-column label="已使用量" prop="useNum"> </el-table-column>
          <el-table-column label="有效时间" prop="effectiveEndTime" width="175">
            <template slot-scope="scope">
              <div>
                {{ scope.row.effectiveStartTime }} -
                {{ scope.row.effectiveEndTime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="模板状态" prop="validStatus">
            <template slot-scope="scope">
              <div>
                {{ scope.row.validStatus == 1 ? "未失效" : "已失效" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="最近一次修改时间"
            prop="updateTime"
            width="140"
          >
          </el-table-column>
          <el-table-column label="操作人" prop="updater"></el-table-column>
          <el-table-column label="操作" width="90">
            <template slot-scope="scope">
              <el-button
                style="color: #fc9e76;"
                @click="SeeInfo(scope.row)"
                type="text"
                size="small"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <div class="left"></div>
        <div class="right">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-size="pageSize"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import list from "../../mock/data";
export default {
  data() {
    return {
      input: "",
      select: "",
      total: 0,
      currentPage1: 1, //当前页码
      pageSize: 20, //每页显示的个数
      list: [],
      dataList: [],
      search: "",
      dialogFormVisible: false,
      formLabelWidth: "120px",
      dialogStatus: "create"
    };
  },
  created() {
    this.getList();
  },
  methods: {
    isSelect() {
      (this.currentPage1 = 1), (this.pageSize = 20), this.getList();
    },

    isEmpty() {
      (this.input = ""),
        (this.currentPage1 = 1), //当前页码
        (this.pageSize = 20), //每页显示的个数
        this.getList();
    },
    // 你的总数据.slice((当前页码—1)*每页显示的个数)，（当前页码*每页的个数）,
    handleSizeChange(val) {
      //改变每页显示的个数
      //console.log(`每页 ${val} 条`);
      this.currentPage1 = 1;

      this.pageSize = val;
      this.getList();
    },
    SeeInfo(data) {
      //console.log("data.couponNo,,,11,,,,,", data.couponNo);
      this.$router.push({
        name: "amend",
        params: {
          data
        },
        query: {
          edit: "edit"
        }
      });
    },
    addCoupon() {
      this.$router.push({
        path: "/amend"
      });
    },
    handleCurrentChange(val) {
      //改变当前页码
      //console.log(`当前页: ${val}`);
      this.currentPage1 = val;
      this.getList();
    },
    but() {
      this.currentPage1 = 1;

      this.getList();
      this.input = "";
    },
    getList() {
      this.$http({
        url: "/couponadmin/v1/couponTemplate/getCouponTemplates",
        params: {
          pageNum: this.currentPage1,
          pageSize: this.pageSize,
          couponTitle: this.input
        }
      }).then(result => {
        this.dataList = result.data.list;
        this.total = parseInt(result.data.total);

        //console.log(this.dataList);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.demo-input-suffix {
  margin-left: -2%;
}
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}

.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.tab {
  margin-top: 3%;
}

.entirety {
  width: 40%;
}

.input-with-select {
  width: 73%;
}
.down {
  width: 85px;
}

.block {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
}
.left {
  font-size: 15px;
}

.top {
  font-size: 15px;
}

.big {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 3% 0 0;
}
</style>
